<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>查看评价</title>
    <link rel="stylesheet" type="text/css" href="../../lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="../../lib/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {font-family: "Microsoft Yahei" !important;}
        .add{
            margin-top: 10px;
            margin-left: 10px;
        }
        .layui-layer-btn .layui-layer-btn1{
            background: #009688;
            color: #fff;
        }
        #Settlement{
            table-layout: fixed;
            border-collapse: collapse;
            width: 100%;
        }
        .layui-body{overflow-y: scroll;}
        #pensons .layui-table-cell {
            font-size:14px;
            padding:0 5px;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
            word-break: break-all;
            text-align: center;
        }
        a{
            color: blue;
        }
        .layui-textarea {
            min-height: 35px;
            width: 300px;
            height: 35px;
            margin-top: 2px;
            /*padding: 6px 10px;*/
            resize: vertical;
            line-height: 20px;
        }
        .layui-input-block{
            width: 100px;
        }
        .layui-rate {
            padding: 0;
            font-size: 0;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<h2 style="background-color: #F2F2F2;padding:5px 10px;margin-bottom: 10px;font-size: 20px;">查看评价</h2>
<form class="layui-form" action="" style="margin-top: 15px">
    <div class="layui-inline layui-form-text">
        <label class="layui-form-label">选择部门：</label>
        <div class="layui-input-inline">
            <textarea  placeholder="请选择部门" deptid="" readonly name="textUser" id="textUser" class="layui-textarea"></textarea>
        </div>
        <span style="color: red">*</span>
        <a href="javascript:;" class="governor" id="market_pop"><fmt:message code="global.lang.add"/></a>
        <a href="javascript:;" class="clearTwo" onclick="market_pop()"><fmt:message code="global.lang.empty"/></a>
    </div>

    <div class="layui-inline" style="margin-left: 50px">
        <div class="layui-input-inline">
            <select name="evLevel" lay-verify="required">
                <option value="1">优秀</option>
                <option value="2">一般</option>
                <option value="3">黑名单</option>
            </select>
        </div>
    </div>

    <div class="layui-inline" style="margin-left: 50px">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-fluid layui-btn-warm inquire">查询</button>
        </div>
    </div>
</form>
<table id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-norma layui-btn-xs" lay-event="all" data-id="" id="all">历次评价</button>
</script>

<script type="text/javascript">
    var dept_id = '';
    $('#market_pop').click(function () {
        dept_id = 'textUser';
        $.popWindow("../common/selectDept");
    });
    //清除数据
    function market_pop() {
        $('#textUser').attr('user_id', '');
        $('#textUser').attr('user_id', '');
        $('#textUser').removeAttr('user_id');
        $('#textUser').val('');
    }
    var laydate;
    var table = layui.table;
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });
    layui.use(['table','form','rate'], function(){
        var rate = layui.rate;
        var form = layui.form;
        var table = layui.table;
        laydate = layui.laydate;
        var tableIns = table.render({
            elem: '#test'
            ,url:'/hrEvaluate/selectByhrEvaluateNew'
            ,cols: [[
                {field:'userName', title:'姓名',fixed: 'left',}
                ,{field:'evLevel', title:'综合评价',templet: evLevelName, edit: 'text'}
                ,{field: 'evSkill',title: '工作技能',templet:function (a) {
                    return '<div id="evSkill'+a.evId+'"></div>'
                }}
                ,{field:'evAttitude', title:'工作态度',templet:function (a) {
                    return '<div id="evAttitude'+a.evId+'"></div>'}}
                ,{field: 'project',title: '所在项目',edit: 'text'}
                ,{field:'evDetail', title:'详细评价',edit: 'text'}
                ,{field: 'evUserName',title: '评价人',edit: 'text'}
                ,{field:'evTime', title:'评价时间', edit: 'text',templet: function(d){
                        return  d.evTime.slice(0,-2)
                    } }
                ,{field: '',title: '操作',toolbar: '#barDemo'}
            ]],done:function(res, curr, count){
                var data = res.data;//返回的json中data数据
                for (var item in data) {
                    var evSkill=data[item].evSkill/2
                    var evAttitude=data[item].evAttitude/2
                    rate.render({
                        elem: '#evSkill'+data[item].evId+''         //绑定元素
                        , length: 5            //星星个数
                        , value:  evSkill          //初始化值
                        , readonly: true      //只读
                        , half: true
                    });
                    rate.render({
                        elem: '#evAttitude'+data[item].evId+''         //绑定元素
                        , length: 5            //星星个数
                        , value:  evAttitude          //初始化值
                        , readonly: true      //只读
                        , half: true
                    });
                }
            }
            ,page: true
        });

        $('.inquire').click(function () {
            var deptId=$("#textUser").attr('deptid');
            var evLevel= $('[name="evLevel"] option:selected').val()
            table.reload('test', {
                where: {
                    deptId: deptId,
                    evLevel:evLevel
                },page: {
                    curr: 1
                }
            })
        });
        //实时获取现在时间
        function date(){

        }
        table.on('tool(test)', function(obj){
            var data={
                userId:obj.data.userId
            }
            $.ajax({
                url: '/hrEvaluate/selectByUserId',
                type: 'post',
                dataType: 'json',
                data:data,
                success: function (res) {
                    console.log(res)
                    layer.open({
                        type: 1,
                        closeBtn: 1,
                        title: '历次评价',
                        area: ['800px', '400px'], //宽高
                        content: '<form class="layui-form" action=""> ' +function () {
                            var str='';
                            for(var i=0;i<res.data.length;i++) {
                                str += '<table class="layui-table" style="text-align: center;margin-bottom: 40px;border: 1px black double;">\n' +
                                    '  <tbody num='+res.data.length+'>\n' +
                                    '    <tr>\n' +
                                    '      <td style="width:15%">综合评价</td>\n' +
                                    // '      <td><input type="text" value="'+evLevelName(res.data[i])+'" name="title" readonly lay-verify="required"  autocomplete="off" class="layui-input"> </td>\n' +
                                    '      <td><div>'+evLevelName(res.data[i])+'</div></td>\n' +
                                    '      <td style="width:15%">工作技能</td>\n' +
                                    '      <td><div id="skill'+res.data[i].evId+'"></div></td>\n' +
                                    '    </tr>\n' +
                                    '    <tr>\n' +
                                    '      <td>所在项目</td>\n' +
                                    // '      <td><input  type="text" value="' + res.data[i].project + '" name="title" readonly lay-verify="required" placeholder="请输入所在项目" autocomplete="off" class="layui-input">  </td>\n' +
                                    '      <td><div>'+res.data[i].project+'</div></td>\n' +
                                    '      <td>工作态度</td>\n' +
                                    '      <td><div id="attitude'+res.data[i].evId+'"></div></td>\n' +
                                    '    </tr>\n' +
                                    '    <tr>\n' +
                                    '      <td>详细评价</td>\n' +
                                    // '      <td colspan="3"><textarea name="" style="width: 630px;height: 100px;" readonly  lay-verify="required" placeholder="请输入评价" class="layui-textarea">' + res.data[i].evDetail + '</textarea></td>\n' +
                                    '      <td colspan="3"><div >' + res.data[i].evDetail + '</div></td>\n' +
                                    '    </tr>\n' +
                                    '    <tr>\n' +
                                    '      <td>评价人</td>\n' +
                                    '      <td><div>'+function () {
                                        if( res.data[i].evUserName==undefined){
                                            return ''
                                        }else{
                                            return res.data[i].evUserName
                                        }
                                    }() + '</div></td>\n' +
                                    '      <td>时间</td>\n' +
                                    '      <td><div>'+res.data[i].evTime.slice(0,-2)+'</div> </td>\n' +
                                    '    </tr>\n' +
                                    '  </tbody>\n' +
                                    '</table>'


//
                            }
                            return str;
                        }()+'</form>'
                        ,success:function () {
                            date()
                            var data = res.data;//返回的json中data数据
                            for (var item in data) {
//                            //渲染
                                rate.render({
                                    elem: '#skill' + data[item].evId + ''   //绑定元素
                                    , half: true //开启半星
                                    , value: data[item].evSkill / 2
                                    ,readonly: true
                                });
                                rate.render({
                                    elem: '#attitude' + data[item].evId + ''  //绑定元素
                                    , half: true //开启半星
                                    , value:  data[item].evAttitude / 2
                                    ,readonly: true
                                });
                            }
                        }
                    });
                }
             })
        });


    });

    function evLevelName(data) {
        var evLevel = data.evLevel;
        if (evLevel == 1) {
            return "优秀";
        }else if(evLevel == 2){
            return "一般 ";
        }else if(evLevel == 3){
            return "黑名单";
        }else {
            return "";
        }
    }

</script>

</body>
</html>